<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装16进制随机颜色</title>
    <style> 
        *{
            padding: 0;
            margin: 0;
        }
        button{
            width: 200px;
            height: 30px;
            font-size: 20px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <button>改颜色</button>

    <script>
        /*
            封装转16进制随机颜色

                * 自己：0-15范围转16进制后拼接
                * 课堂：字符串索引值str[inx]

        */
        function randomColor_16(){
            // 6个16进制的数进行拼接
            var number = '#';
            for(var i=0;i<6;i++){
                // 1234567890abcdef，16进1，所以取0-15
                number += parseInt(Math.random()*16).toString(16);
            }
            return number;
        }

        // 初始化
        document.body.style.background  = randomColor_16()+'';
        
        // 点击改变背景色
        var btn = document.getElementsByTagName('button')[0];
        btn.onclick = function(){
            document.body.style.background  = randomColor_16()+'';
        }
    </script>
</body>
</html>